<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="robots" content="all,follow">
    <meta name="googlebot" content="index,follow,snippet,archive">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Jorange | 橙乐文化</title>

    <meta name="keywords" content="">
    <link rel="shortcut icon" type="image/ico" href="${base }/assets/img/favicon.ico" />
    <link href='${base }/assets/fonts/cssc31a.css?family=Montserrat:400,700|Merriweather:400,400italic' rel='stylesheet' type='text/css'>

    <!-- Bootstrap and Font Awesome css -->
    <link href="${base }/assets/css/font-awesome.css" rel="stylesheet">
    <link href="${base }/assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme stylesheet -->
    <link href="${base }/assets/css/style.default.css" rel="stylesheet" id="theme-stylesheet">

    <!-- Custom stylesheet - for your changes -->
    <link href="${base }/assets/css/custom.css" rel="stylesheet">

    <!-- Responsivity for older IE -->
    <script src="${base }/assets/js/respond.min.js"></script>

    <link href="${base }/assets/css/owl.carousel.css" rel="stylesheet">
    <link href="${base }/assets/css/owl.theme.css" rel="stylesheet">
</head>

<body>
    <!-- *** NAVBAR *** -->
	<%@ include file="include/navbar.jsp"%>
    <!-- *** NAVBAR END *** -->
    <div id="all">

        <div id="content">
            <div class="container">
                <div class="col-md-12">
                    <ul class="breadcrumb">
                        <li><a href="javascript:;">Home</a></li>
                        <li>Work</li>
                    </ul>
                    <div class="row">
                        <div class="box text-center">
                            <div class="row">
                                <div class="col-sm-10 col-sm-offset-1">
                                    <h1>JORANGE WORK</h1>
<!--                                     <p class="text-muted">In our Ladies department we offer wide selection of the best products we have found and carefully selected worldwide. Pellentesque habitant morbi tristique senectus et netuss.</p> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">


                    <!-- *** LEFT COLUMN ***  -->

                    <div class="col-sm-9">
<!--                         <div class="box info-bar no-border"> -->
<!--                             <div class="row"> -->
<!--                                 <div class="col-sm-12 col-md-4 products-showing"> -->
<!--                                     Showing <strong>12</strong> of <strong>25</strong> products -->
<!--                                 </div> -->

<!--                                 <div class="col-sm-12 col-md-8  products-number-sort"> -->
<!--                                     <div class="row"> -->
<!--                                         <form class="form-inline"> -->
<!--                                             <div class="col-md-6 col-sm-6"> -->
<!--                                                 <div class="products-number"> -->
<!--                                                     <strong>Show</strong>  <a href="javascript:;" class="btn btn-default btn-sm btn-primary">12</a>  <a href="javascript:;" class="btn btn-default btn-sm">24</a>  <a href="javascript:;" class="btn btn-default btn-sm">All</a>  <span class="hidden-md">products</span> -->
<!--                                                 </div> -->
<!--                                             </div> -->
<!--                                             <div class="col-md-6 col-sm-6"> -->
<!--                                                 <div class="products-sort-by"> -->
<!--                                                     <strong>Sort by</strong> -->
<!--                                                     <select name="sort-by" class="form-control"> -->
<!--                                                         <option>Price</option> -->
<!--                                                         <option>Name</option> -->
<!--                                                         <option>Sales first</option> -->
<!--                                                     </select> -->
<!--                                                 </div> -->
<!--                                             </div> -->
<!--                                         </form> -->
<!--                                     </div> -->
<!--                                 </div> -->
<!--                             </div> -->
<!--                         </div> -->
                        <div class="row products">
						<c:forEach items="${works }" var="work">
                            <div class="col-md-4 col-sm-6">
                                <div class="product">
                                    <div class="image">
                                        <a href="${base }/detail/${work.id }">
											<img class="scrollLoading img-responsive image1" data-url="${base }/image/work/${work.img }" src="${base}/assets/img/pixel.gif" width="262px" height="262px" style="background:url(${base}/assets/img/loading.gif) no-repeat center;">
                                        </a>
                                        <div class="quick-view-button">
                                            <a href="${base }/detail/${work.id }" class="btn btn-default btn-sm">Quick view</a>
                                        </div>
                                    </div>
                                    <div class="text">
                                        <h3><a href="${base }/detail/${work.id }">${work.title } | ${work.author }</a></h3> 
                                        <p class="price">${work.company }</p>
                                    </div>
                                    <c:forEach var="tag" items="${work.tags }">
<%-- 		                                <c:if test="${tag eq 'HOT' }"> --%>
<!-- 		                                <div class="ribbon sale"> -->
<%-- 		                                    <div class="theribbon">${tag }</div> --%>
<!-- 		                                    <div class="ribbon-background"></div> -->
<!-- 		                                </div> -->
<%-- 		                                </c:if> --%>
		                                <c:if test="${tag eq 'NEW' }">
										<div class="ribbon new">
		                                    <div class="theribbon">${tag }</div>
		                                    <div class="ribbon-background"></div>
		                                </div>
		                                </c:if>
	                                </c:forEach>
                                </div>
                            </div>
						</c:forEach>
                        </div>
                        <!-- /.products -->
                        <div class="row">

                            <div class="col-md-12 banner">
                                <a href="javascript:;">
                                    <img src="${base }/assets/img/banner2.jpg" alt="" class="img-responsive">
                                </a>
                            </div>

                        </div>
<!--                         <div class="pages"> -->
<!--                             <p class="loadMore"> -->
<!--                                 <a href="javascript:;" class="btn btn-primary"><i class="fa fa-chevron-down"></i> Load more</a> -->
<!--                             </p> -->
<!--                             <ul class="pagination"> -->
<!--                                 <li><a href="javascript:;">&laquo;</a> -->
<!--                                 </li> -->
<!--                                 <li class="active"><a href="javascript:;">1</a> -->
<!--                                 </li> -->
<!--                                 <li><a href="javascript:;">2</a> -->
<!--                                 </li> -->
<!--                                 <li><a href="javascript:;">3</a> -->
<!--                                 </li> -->
<!--                                 <li><a href="javascript:;">4</a> -->
<!--                                 </li> -->
<!--                                 <li><a href="javascript:;">5</a> -->
<!--                                 </li> -->
<!--                                 <li><a href="javascript:;">&raquo;</a> -->
<!--                                 </li> -->
<!--                             </ul> -->
<!--                         </div> -->
                    </div>
                    <!-- /.col-md-9 -->

                    <!-- *** LEFT COLUMN END *** -->

                    <!-- *** RIGHT COLUMN ***  -->
					<%@ include file="include/right_column.jsp"%>
                    <!-- *** RIGHT COLUMN END *** -->

                </div>

            </div>
            <!-- /.container -->
        </div>
        <!-- /#content -->

        <!-- *** FOOTER *** -->
		<%@ include file="include/footer.jsp"%>
        <!-- *** FOOTER END *** -->

        <!-- *** COPYRIGHT *** -->
		<%@ include file="include/copyright.jsp"%>
        <!-- /#copyright -->
    </div>
    <!-- /#all -->

    <script type="text/javascript">var base = "${base }";</script>
    <script src="${base }/assets/js/jquery-1.11.0.min.js"></script>
    <script src="${base }/assets/js/bootstrap.min.js"></script>
    <script src="${base }/assets/js/jquery.cookie.js"></script>
    <script src="${base }/assets/js/front.js"></script>
    
    <script src="${base }/assets/js/jquery.scrollLoading-min.js"></script>
    <script type="text/javascript">
    $(function () {
    	$(".scrollLoading").scrollLoading();
    });
    </script>
</body>
</html>

